import React from 'react'
import {
  // Routes,
  // Route,
  Link,
  // Navigate,
  useNavigate,
  useRoutes,
} from 'react-router-dom'
// import Home from './pages/Home'
// import About from './pages/About'
// import Login from './pages/Login'
// import NotFound from './pages/NotFound'
// import HomeRecommend from './pages/HomeRecommend'
// import HomeRanking from './pages/HomeRanking'
// import Category from './pages/Category'
// import Order from './pages/Order'
// import HomeSongMenu from './pages/HomeSongMenu'
// import Detail from './pages/Detail'
// import User from './pages/User'
import './style.css'
import routes from './router'

export function App(props) {
  const navigate = useNavigate()

  function navigateTo(path) {
    console.log(path)
    navigate(path)
  }

  return (
    <div className="app">
      <div className="header">
        <span>header</span>
        <hr />
        <div className="nav">
          {/* NavLink动态添加style */}
          {/* <NavLink
            to="/home"
            style={({ isActive }) => ({
              borderBottom: isActive ? '1px solid red' : '',
            })}
          >
            首页
          </NavLink>
          <NavLink
            to="/about"
            style={({ isActive }) => ({
              borderBottom: isActive ? '1px solid red' : '',
            })}
          >
            about
          </NavLink> */}

          {/* 动态添加class */}
          {/* <NavLink
            to="/home"
            className={({ isActive }) => (isActive ? 'link-active' : '')}
          >
            首页
          </NavLink>
          <NavLink
            to="/about"
            className={({ isActive }) => (isActive ? 'link-active' : '')}
          >
            about
          </NavLink> */}

          <Link to="/home">首页</Link>
          <Link to="/about">about</Link>
          <Link to="/login">Login</Link>
          <button onClick={(e) => navigateTo('/category')}>分类</button>
          <span onClick={(e) => navigateTo('/order')}>订单</span>
          <Link to="/user?name=why&age=18">用户</Link>
        </div>
      </div>

      <div className="content">
        {/* 映射关系：path => compoent */}
        {/* <Routes>
          <Route path="/" element={<Navigate to="/home" />}></Route>
          <Route path="/home" element={<Home />}>
            <Route
              path="/home"
              element={<Navigate to="/home/recommend" />}
            ></Route>
            <Route path="/home/recommend" element={<HomeRecommend />} />
            <Route path="/home/ranking" element={<HomeRanking />} />
            <Route path="/home/songMenu" element={<HomeSongMenu />} />
          </Route>
          <Route path="/about" element={<About />} />
          <Route path="/login" element={<Login />} />
          <Route path="/category" element={<Category />} />
          <Route path="/order" element={<Order />} />
          <Route path="/detail/:id" element={<Detail />} />
          <Route path="/user" element={<User />} />
          <Route path="*" element={<NotFound />}></Route>
        </Routes> */}

        {useRoutes(routes)}
      </div>

      <div className="footer">
        footer <hr />
      </div>
    </div>
  )
}

export default App
